<template>
    <div>
        <div class="row">
            <!-- @click="toDetails(item)" -->
            <div class="col-lg-6 item-list" v-for="(item,index) in activeList" :key="index">
                <div class="back-fff">
                    <div class="title">
                        {{item.F_EnrbatchName}}
                        <!-- <span class="state" :class="[item.F_Status=='4'?'stateEnd':item.F_Status==0 ? 'state2' : 'state1']">{{item.F_Status=='4' ? 'End' : 'Running'}}</span> -->
                    </div>
                    <div class="section">
                        <div class="text" style="margin-left: 0;">{{item.F_Season}}</div>
                        <!-- <div class="flex align-center">
                            <div class="name">Upload Your File</div>
                            <div class="btn" @click="openUpload(item)">Upload</div>
                        </div> -->
                        <div class="flex align-center">
                            <div class="name">Application Form</div>
                            <div class="btn" @click="openDetails(item)">Review</div>
                        </div>
                        <div class="flex align-center">
                            <div class="name">Application Progress</div>
                            <div class="text" style="color:#478cfe;">{{item.F_EnrollStatus}}</div>
                            <div class="btn" @click="toDetails(item)">Review</div>
                        </div>
                        <!-- 能不能去掉创建时间？ -->
                        <!-- <div class="flex align-center">
                            <div class="name">Create Time</div>
                            <div class="text">{{$ut.dateFormat(item.F_CreateDate)}}</div>
                        </div> -->
                        <!-- <el-popconfirm v-if="item.F_IsModifyPoint=='1'" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="del(item,index)">
                            <span slot="reference" class="icon iconfont del">&#xe6a0;</span>
                        </el-popconfirm> -->
                    </div>
                </div>
            </div>
            <BaseNull v-if="BaseNull" />
        </div>
    </div>
</template>
<script>
import to from 'await-to-js'
import { GetMyEnrollmentRecord, RemoveMyEnrollmentApplicationApi } from "@/api/activity";
export default {
    data() {
        return {
            form: {
                pageSizs: 10,
                pageNum: 1
            },
            userId: this.$store.state.userId,
            activeList: []
        };
    },
    mounted() {
        this.getList();
    },
    computed: {
        BaseNull() {
            return this.activeList.length === 0
        }
    },
    methods: {
        getList() {
            GetMyEnrollmentRecord({
                F_UserId: this.userId
            }).then((res) => {
                this.activeList = res.data.Data || []
            });
        },
        // 跳转
        toDetails(item) {
            this.$router.push({
                path: "/user/admissionDeatils",
                query: {
                    F_StudentPoolId: item.F_StudentPoolId,
                    F_EnrbatchName: item.F_EnrbatchName,
                    F_SchemeInfoId_File:item.F_SchemeInfoId_File,
                    GroupId:item.GroupId,
                    F_ActivityId:item.F_ActivityId
                }
            });
        },
        openUpload(item) {
            var url = '/Website/customForm/form?formid='+item.F_SchemeInfoId_File+'&groupId=' + item.GroupId + '&F_ActivityId=' + item.F_ActivityId
            window.open(url)
        },
        openDetails(item) {
            var url = '/Website/customForm/form?formid=' + item.FormId + '&groupId=' + item.GroupId + '&F_ActivityId=' + item.F_ActivityId
            if (item.F_IsModifyPoint != '1') url += '&onlyView=1'
            window.open(url)
        },
        async del(item, index) {
            var [err, res] = await to(RemoveMyEnrollmentApplicationApi({
                "GroupId": item.GroupId,
                "FormId": item.FormId
            }))
            if (err) return alert('接口异常')

            this.activeList.splice(index, 1)
            this.$message({ message: '删除成功', type: 'success' })
        }
    }
};
</script>
<style scoped lang="scss">
.item-list {
    transition: 300ms;
    margin-bottom: 15px;
    &:hover {
        opacity: 0.8;
    }
}
.title {
    font-size: 16px;
    line-height: 50px;
    border-left: 6px solid #2d9ef3;
    padding-left: 21px;
    position: relative;
}

.btn {
    padding: 0 10px;
    background-color: #478cfe;
    line-height: 25px;
    height: 25px;
    color: white;
    border-radius: 15px;
    cursor: pointer;
    margin-left: 10px;
}
.state {
    position: absolute;
    right: 0;
    height: 30px;
    background-color: #72b622;
    line-height: 30px;
    text-align: center;
    color: #fff;
    top: 10px;
    padding: 0 10px;
}

.state1 {
    background-color: #72b622;
    color: #fff;
}
.state2 {
    background-color: #aaaaaa;
}
.stateEnd {
    background-color: gray;
    color: #72b622;
}
.section {
    padding: 10px 21px 21px;
    position: relative;

    .name {
        line-height: 34px;
        color: #666666;
    }

    .text {
        line-height: 34px;
        color: #000000;
        margin-left: 10px;
    }

    .flex {
        align-items: center;
    }

    &:hover .del {
        display: block;
    }

    .del {
        display: none;
        position: absolute;
        right: 21px;
        bottom: 20px;
        font-size: 25px;
        color: red;
        cursor: pointer;
    }
}
</style>